<script setup lang="ts">
import { reactive, ref, toRaw } from "vue";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { usePageScroll } from "@/hooks/scroll";
import { useList } from "@/hooks/page";
import {
  fx_shop_home_api,
  fx_shop_get_recommend_list_api,
  fx_shop_tour_header_api,
  fx_shop_tour_list_api,
  fx_shop_passport_list_api,
  fx_shop_course_list_api,
  fx_shop_shop_list_api,
  fx_shop_wenbo_list_api,
} from "@/package/guider/api/tour_user";
import { Account } from "@/utils/account";
import { Storage } from "@/utils/database";
import { Router } from "@/utils/router";

import NavBack from "@/components/nav/back.vue";
import NavBar from "@/components/nav/bar.vue";
import NavBg from "@/components/nav/bg.vue";
import NavSpace from "@/components/nav/space.vue";
import Swipe from "@/components/swipe/swipe.vue";
import SwipeDot from "@/components/swipe/dot.vue";
import IndexMenuTitle from "./components/index-menu-title.vue";
import IndexHotItem from "./components/index-hot-item.vue";
import PageSticky from "@/components/page/sticky.vue";
import IndexTabItem from "./components/index-tab-item.vue";
import IndexJpsQuery from "./components/index-jps-query.vue";
import IndexProductItem from "./components/index-product-item.vue";
import ListMore from "@/components/list/more.vue";
import PageBtn from "@/components/page/btn.vue";
import ServiceContact from "@/components/service/contact.vue";

const storeKey = "guider-store-last-store";

onLoad((options) => {
  fx_shop_home_api({ guider_id: options?.id }).then((resp) => {
    storeData.img = resp.shop_info.logo;
    storeData.name = resp.shop_info.name;
    adList.value = resp.banner;
    hotList.value = resp.recommend;

    const _tabList = [{ id: 2, name: "推荐" }];
    if (resp.wenbo_count > 0) {
      _tabList.push({ id: 7, name: "文博讲解" });
    }
    if (resp.tour_count > 0) {
      _tabList.push({ id: 3, name: "人工讲解" });
      fx_shop_tour_header_api({ guider_id: tempData.id }).then((resp) => {
        const _jpsTypeList: any[] = [];
        if (resp.is_china_count > 0) {
          _jpsTypeList.push({ id: 1, name: "国内", list: resp.in_china });
        }
        if (resp.is_out_china_count > 0) {
          _jpsTypeList.push({ id: 2, name: "海外", list: resp.out_china });
        }
        if (resp.is_foreign_count > 0) {
          _jpsTypeList.push({ id: 3, name: "外语" });
        }
        if (resp.is_public_welfare_count > 0) {
          _jpsTypeList.push({ id: 4, name: "公益讲解" });
        }
        jpsTypeList.value = _jpsTypeList;
      });
    }
    if (resp.passport_count > 0) {
      _tabList.push({ id: 4, name: "手机导览" });
    }
    if (resp.shop_count > 0) {
      _tabList.push({ id: 5, name: "实物商品" });
    }
    if (resp.course_count > 0) {
      _tabList.push({ id: 6, name: "线上课程" });
    }
    tabList.value = _tabList;

    // 上次访问
    Storage.setSync(storeKey, {
      id: tempData.id,
      ...toRaw(storeData),
    });
  });

  reloadList();

  tempData.id = options?.id;
});
const { pageIsScroll, onPageScroll } = usePageScroll((scrollTop) => {
  listLoadMore.value = listData.value.length > 1;
  backVisible.value = scrollTop > tempData.windowHeight;
});
onReachBottom(() => loadMoreList());

const storeData = reactive({ img: "", name: "" });
const storeClick = () => {
  const pages = getCurrentPages();
  const page = pages[pages.length - 2];
  page.route?.includes("package/guider/pages/detail/index")
    ? Router.navigateBack()
    : Router.navigateTo(`/package/guider/pages/detail/index?id=${tempData.id}`);
};

const searchClick = () => {
  Router.navigateTo(`/package/guider/pages/store/search?id=${tempData.id}`);
};

const adIndex = ref(0);
const adList = ref<any[]>([]);
const adClick = () => {
  const ad = adList.value[adIndex.value];
  let url = ad.url.replace(
    "/package/product/pages/detail/detail",
    "/package/mall/pages/goods/detail"
  );
  url = url.replace(
    "/package/shop/pages/product/detail",
    "/package/mall/pages/goods/detail"
  );

  url.startsWith("http")
    ? Router.navigateToWeb(url, "1")
    : Router.navigateTo(url);
};

const hotList = ref<any[]>([]);
const hotClick = (index: number) => {
  if (index === -1) {
    // 全部
    Router.navigateTo(`/package/guider/pages/store/hot?id=${tempData.id}`);
  } else {
    handleProduct(toRaw(hotList.value)[index]);
  }
};

const tabIndex = ref(0);
const tabList = ref([{ id: 2, name: "推荐" }]);
const tabClick = (index: number) => {
  tabIndex.value = index;
  reloadList();
};

const { listData, listStatus, listLoadMore, reloadList, loadMoreList } =
  useList({ page: 1, page_size: 10 }, (query) => {
    const queryData = { ...query, guider_id: tempData.id };

    const tab = tabList.value[tabIndex.value];
    if (tab.id === 5) {
      // 实物商品
      return fx_shop_shop_list_api(queryData);
    } else if (tab.id === 6) {
      // 线上课程
      return fx_shop_course_list_api(queryData);
    } else if (tab.id === 4) {
      // 手机导览
      return fx_shop_passport_list_api(queryData);
    } else if (tab.id === 3) {
      // 线下精讲
      return fx_shop_tour_list_api({ ...queryData, ...toRaw(jpsQueryData) });
    } else if (tab.id === 7) {
      // 文博讲解
      return fx_shop_wenbo_list_api(queryData);
    } else {
      // 精选
      return fx_shop_get_recommend_list_api(queryData);
    }
  });

const jpsQueryData = reactive({ type: 1, id: "" });
const jpsTypeList = ref<any[]>([]);

const productClick = (index: number) => {
  handleProduct(toRaw(listData.value)[index]);
};

const handleProduct = (product: any) => {
  Router.navigateTo(
    product.order_type === 3
      ? `/package/study/pages/course/detail?guiderId=${tempData.id}&id=${product.id}`
      : product.order_type === 2 || product.order_type === 8
      ? `/package/mall/pages/jps/detail?id=${product.id}&guiderId=${tempData.id}`
      : `/package/mall/pages/goods/detail?id=${product.id}&guiderId=${tempData.id}`
  );
};

const backVisible = ref(false);
const backClick = () => {
  uni.pageScrollTo({ scrollTop: 0 });
};

const tempData = { id: "", windowHeight: uni.getSystemInfoSync().windowHeight };
</script>

<template>
  <NavBack navigationBarTextStyle="white" />
  <NavBar>
    <view class="index-nav" @click="storeClick">
      <image class="index-nav-img" :src="storeData.img" mode="aspectFill" />
      <view class="index-nav-title">{{ storeData.name }}</view>
      <view class="index-nav-btn">
        主页
        <image
          class="index-nav-btn2"
          src="@/package/guider/static/store-index-arrow.png"
        />
      </view>
    </view>
  </NavBar>
  <NavBg
    :retract="pageIsScroll"
    url="/package/guider/static/store-index-bg.png"
  />
  <NavSpace />

  <view class="index-search" @click="searchClick">
    <icon type="search" size="28rpx" color="#999999" />
    <view class="index-search-text">搜索产品</view>
  </view>

  <view class="index-ad">
    <view class="index-ad-bg"></view>
    <view class="index-ad-swipe" @click="adClick">
      <Swipe v-model="adIndex" :listData="adList" labelKey="img_url" autoplay />
    </view>
    <view class="index-ad-dot">
      <SwipeDot v-model="adIndex" :total="adList.length" />
    </view>
  </view>

  <view class="index-hot" v-if="hotList.length !== 0">
    <view class="index-hot-title">
      <IndexMenuTitle title="精选商品" />
    </view>
    <view class="index-hot-all" @click="hotClick(-1)">
      全部
      <image
        class="index-hot-all2"
        src="@/package/guider/static/store-index-arrow2.png"
      />
    </view>
    <scroll-view
      class="index-hot-data"
      scroll-x
      enhanced
      :show-scrollbar="false"
    >
      <view class="index-hot-space"></view>
      <view
        class="index-hot-item"
        v-for="(i, d) of hotList"
        :key="i.id"
        @click="hotClick(d)"
      >
        <IndexHotItem :info="i" />
      </view>
    </scroll-view>
  </view>

  <PageSticky customNav :background="pageIsScroll ? '#ffffff' : 'transparent'">
    <scroll-view class="index-tab" scroll-x enhanced :show-scrollbar="false">
      <view class="index-tab-space"></view>
      <view
        class="index-tab-item"
        v-for="(i, d) of tabList"
        :key="i.id"
        @click="tabClick(d)"
      >
        <IndexTabItem :modelValue="tabIndex === d" :text="i.name" />
      </view>
    </scroll-view>

    <template v-if="tabList[tabIndex].id === 3 && jpsTypeList.length > 0">
      <IndexJpsQuery
        :modelValue="jpsQueryData"
        :listData="jpsTypeList"
        @change="reloadList"
      />
    </template>
  </PageSticky>

  <view class="index-data">
    <view class="index-data-wrapper">
      <view
        class="index-data-item"
        v-for="(i, d) of listData"
        :key="i.id"
        @click="productClick(d)"
      >
        <IndexProductItem :info="i" />
      </view>
    </view>
    <ListMore v-if="listLoadMore" :status="listStatus" />
  </view>

  <view class="index-fixed">
    <view v-if="backVisible" style="margin-bottom: 30rpx" @click="backClick">
      <PageBtn icon="/package/guider/static/store-index-back.png" />
    </view>

    <PageBtn
      icon="/package/guider/static/store-index-contact.png"
      text="咨询客服"
    >
      <ServiceContact />
    </PageBtn>
  </view>
</template>

<style lang="scss">
page {
  background-color: #ffffff;
}

.index-nav {
  display: flex;
  align-items: center;
  flex-grow: 1;
  min-width: 0;
  padding-left: 50px;
  padding-right: 30rpx;

  .index-nav-img {
    flex-shrink: 0;
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    border: 2rpx solid #ffffff;
  }

  .index-nav-title {
    min-width: 0;
    margin-left: 24rpx;
    font-size: 32rpx;
    color: #ffffff;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .index-nav-btn {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 8rpx;
    margin-left: 10rpx;
    font-size: 24rpx;
    color: #ffffff;
    line-height: 32rpx;
    border-radius: 10rpx;
    border: 2rpx solid #ffffff;
  }

  .index-nav-btn2 {
    width: 20rpx;
    height: 20rpx;
  }
}

.index-search {
  position: relative;
  display: flex;
  align-items: center;
  height: 70rpx;
  padding-left: 30rpx;
  margin: 20rpx 30rpx 30rpx;
  border-radius: 36rpx;
  background-color: #ffffff;

  .index-search-text {
    margin-left: 10rpx;
    font-size: 28rpx;
    color: #999999;
  }
}

.index-ad {
  position: relative;
  margin: 0 40rpx 52rpx;

  .index-ad-bg {
    position: absolute;
    left: 20rpx;
    top: 18rpx;
    right: 20rpx;
    height: 244rpx;
    border-radius: 20rpx;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20rpx);
  }

  .index-ad-swipe {
    position: relative;
    height: 250rpx;
    border-radius: 20rpx;
    overflow: hidden;
  }

  .index-ad-dot {
    position: absolute;
    right: 30rpx;
    bottom: 20rpx;
  }
}

.index-hot {
  position: relative;

  .index-hot-title {
    padding-left: 30rpx;
    margin-bottom: 10rpx;
  }

  .index-hot-all {
    position: absolute;
    top: 0;
    right: 30rpx;
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #999999;
    line-height: 44rpx;
  }

  .index-hot-all2 {
    margin-left: 4rpx;
    width: 20rpx;
    height: 20rpx;
  }

  .index-hot-data {
    width: 100%;
    height: 388rpx;
    white-space: nowrap;
  }

  .index-hot-space,
  .index-hot-item {
    display: inline-block;
    vertical-align: top;
    width: 30rpx;
  }

  .index-hot-item {
    width: 498rpx;
    margin-top: 20rpx;
    margin-right: 20rpx;
    border-radius: 20rpx;
    background-color: #ffffff;
    box-shadow: 0 0 18rpx 0 rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }
}

.index-tab {
  width: 100%;
  height: 100rpx;
  white-space: nowrap;

  .index-tab-space,
  .index-tab-item {
    display: inline-block;
    vertical-align: top;
  }

  .index-tab-space {
    width: 20rpx;
  }

  .index-tab-item {
    padding: 0 10rpx;
    margin-top: 20rpx;
    margin-right: 40rpx;
  }
}

.index-data {
  .index-data-wrapper {
    padding-top: 20rpx;
  }

  .index-data-item {
    position: relative;
    margin: 0 30rpx 20rpx;
  }

  .index-data-state {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 18rpx;
    margin-left: auto;
    font-size: 24rpx;
    color: #1bc76f;
    line-height: 40rpx;
    border-radius: 22rpx;
    border: 2rpx solid #1bc76f;
  }
}

.index-fixed {
  position: fixed;
  right: 30rpx;
  bottom: calc(100rpx + env(safe-area-inset-bottom));
}
</style>